import React, { useState, } from 'react';
import { Breadcrumb, Input, Button, Table, Switch,message } from 'antd';
import '../../../views/Index/Banner/Banner.scss'
import { PlusOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'
import type { ColumnsType } from 'antd/es/table';
import service from '../../../api';
import { useEffect } from 'react'

interface Props {

}

interface DataType {
    key: React.Key;
    name: string;
    img: string;
    mingcheng: any;
    time: string;
    id:string
}

function Banner(props: Props) {
    const navigate = useNavigate()
    const tiao = () => {
        navigate('/index/banneradd')
    }
    //轮播列表
    const res1 = async () => {
        const res = await service.banner.banner_list()
        console.log(res.data);
        setList(res.data)
    }
    useEffect(() => {
        res1()
    }, [])


    const [list, setList] = useState<DataType[]>([])

    const columns: ColumnsType<DataType> = [
        {
            title: 'Banner缩略图',
            dataIndex: 'img',
            key: 'img',
            render: (_, record) => <img src={record.img} />
        },
        {
            title: '名称',
            dataIndex: 'mingcheng',
            key: 'mingcheng',
            render: (_, record) => <p>{record.mingcheng}</p>
        },
        {
            title: 'Banner状态',
            dataIndex: 'zhuangtai',
            key: 'zhuangtai',
            render: (_, record) => <p>{<Switch defaultChecked onChange={onChange} />}</p>
        },
        {
            title: '添加人',
            dataIndex: 'name',
            key: 'name',
            render: (_, record) => <span>{record.name}</span>
        },
        {
            title: '添加时间',
            dataIndex: 'time',
            key: 'time',
            render: (_, record) => <span>{record.time}</span>
        },
        {
            title: '排序号',
            dataIndex: 'name',
            key: 'name',
            render: (_, record) => <a>{list.indexOf(record) + 1}</a>,

        },
        {
            title: '操作',
            dataIndex: 'caozuo',
            key: 'caozuo',
            render: (_, record) => {
                return <>
                    <div className="handle">
                        <Button>编辑</Button>
                        <Button onClick={()=>{ deletebanner(record.id) }}>删除</Button>
                    </div>
                </>
            }
        },
    ];

    //新增
    const banneradd = async ()=>{
        const add = await service.banner.banner_add()
        console.log(add);
        
    }

    //删除单条数据
    const deletebanner = async (id:string)=>{
        const res2 = await service.banner.banner_delete({id})
        console.log(res2);
        if(res2.status == 200 ){
            message.success('删除成功')
            res1()
        }else{
            message.error('删除失败')
        }
    }

    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };

    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };


    //开关
    const onChange = (checked: boolean) => {
        console.log(`switch to ${checked}`);
    };
    //搜索
    var [text, setText] = useState<any>()//搜索
    var searchs = (e: any) => {
        var valu = e.target.value
        setText(valu)
        console.log(valu);
    }
    const searchd = async()=>{
        const res = await service.banner.banner_search({mingcheng:text})
        console.log(res);
        setList(res.data)
        res.data.map((item:any)=>{
            item.key = item.id
        })
    }

    return (
        <div className='banner'>
            <div className="one">
                <Breadcrumb>
                    <Breadcrumb.Item>
                        <a href="">设置</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">Banner图管理</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
                <p>Banner图管理</p>
                <div className="sou">
                    <div className="left">
                        <span>Banner名称:</span>
                        <Input value={text} onChange={e =>{
                            searchs(e)
                        }} placeholder="请输入" />
                    </div>
                    <div className="right">
                        <Button onClick={searchd} type="primary">查询</Button>
                        <Button>重置</Button>
                    </div>
                </div>
                <div className="two">
                    <div className="top">
                        <header>广告Banner列表</header>
                        <div className="you">
                            <Button onClick={tiao} type="primary"><PlusOutlined />新建</Button>
                            <Button>批量操作</Button>
                        </div>
                    </div>
                </div>
                <div className="taber">
                    <Table rowSelection={rowSelection} columns={columns} dataSource={list} />
                </div>
            </div>
        </div>
    );
}

export default Banner;